<template>
  <div>
    <div class="gb-header flex-box">
      <div class="top-icon">
        <img src="../../assets/img/img-mall/gb-new_01a.png" alt="" />
        <img src="../../assets/img/img-mall/gb-new_01.png" alt="" />
      </div>
      <div class="top-search">
        <button>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-gb-sousuo"></use>
          </svg>
        </button>
        <input type="text" />
      </div>
      <div class="navItems flex-box" @click="navShow">
        <span :class="{navActiveA : mallNavShow}"></span>
        <span :class="{navActiveB : mallNavShow}"></span>
        <span :class="{navActiveC : mallNavShow}"></span>
      </div>
    </div>
    <div class="gb-navbreak">
      <ul>
        <li class="active"><router-link to="/mall">首页</router-link></li>
        <li><router-link to="/mall/mallPuShuo">谱说</router-link></li>
        <li>腔调</li>
        <li><a href="#">积分</a></li>
        <li><a href="#">商城</a></li>
        <li><a href="#">粉丝</a></li>
        <li><a href="#">合作</a></li>
        <li><a href="#">报告</a></li>
        <li><a href="#">预约</a></li>
        <li><a href="#">订单</a></li>
        <li><a href="#">客服</a></li>
        <li><a href="#">官方淘宝</a></li>
      </ul>
    </div>
    <transition mode="out-in"
      name="slide-left"
      :enter-active-class="'slide-active'"
      :leave-active-class="'slide-active'">
      <mallNavs v-show="mallNavShow" />
    </transition>
  </div>
</template>

<script>
import '@/assets/css/gb-index.scss'
import mallNavs from '@/components/mall/mall_navs.vue'
// @ is an alias to /src
export default {
  name: 'mallIndex',
  data() {
    return {
      lists: '',
      mallNavShow: false,
      navLists: []
    }
  },
  components: {
    mallNavs
  },
  methods: {
    navShow() {
      this.mallNavShow = !this.mallNavShow
      console.log(4545)
    }
  },
  mounted() {}
}
</script>
<style scoped lang="scss">
.slide-active {
  transition: 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition-property: opacity, transform;
}
.slide-left-enter,
.slide-right-leave-to {
  opacity: 0;
  transform: translate3d(-20%, 0, 0);
}
.slide-left-leave-to,
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-20%, 0, 0);
}
.main-container {
  width: 100%;
  height: 100%;
}
.navItems {
  width: 22px;
  height: 25px;
  padding-top: 3px;
  padding-bottom: 3px;
  box-sizing: border-box;
  float: right;
  align-content: space-between;
  flex-wrap: wrap;
  position: relative;
  z-index: 666;
  span {
    width: 100%;
    height: 3px;
    float: left;
    border-radius: 2px;
    background: #333;
    transition: 0.35s ease;
    position: relative;
  }
  .navActiveA {
    transform: rotate(45deg);
    top: 8px;
  }
  .navActiveB {
    opacity: 0;
  }
  .navActiveC {
    transform: rotate(-45deg);
    top: -8px;
  }
}
</style>
